<template>
    <div class="cart_item">
      <div class="cart_column column_1">
        <el-checkbox class="my_el_checkbox" v-model="course.selected"></el-checkbox>
      </div>
      <div class="cart_column column_2">
        <img :src="course.course_img" alt="">
        <span><router-link :to="'/courses/detail/'+course.id">{{course.name}}</router-link></span>
      </div>
      <div class="cart_column column_3">
        <el-select v-model="course.expire_id" size="mini" placeholder="请选择购买有效期" class="my_el_select">
          <el-option v-for="item in course.expire_list" :label="item.expire_text" :value="item.id" :key="item.id"></el-option>
        </el-select>
      </div>
      <div class="cart_column column_4">¥{{course.price}}</div>
      <div class="cart_column column_4" @click="delete_course">删除</div>
    </div>
</template>

<script>
export default {
    name: "CartItem",
    props:["course"],
    data(){
      return {

      }
    },
    watch:{
        "course.selected": function() {
          this.change_selected();
        },
      "course.expire_id": function () {
        this.change_expire();
      }
    },
  methods: {
    change_expire() {
      // 切换有效期
      let token = localStorage.user_token || sessionStorage.user_token;
      this.$axios.put(`${this.$settings.HOST}/cart/`, {
        expire_id: this.course.expire_id,
        course_id: this.course.id
      }, {
        headers: {
          "Authorization": "jwt " + token,
        }
      }).then(response => {
        this.$message.success(response.data.message);
        this.course.price = response.data.real_price;
        // 当子组件中，切换了商品课程的有效期选项，则通知父组件重新计算购物商品总价
        this.$emit("change_select");
      }).catch(error => {
        this.$message.error(error.response);
      })
    },
    change_selected() {
      let token = localStorage.user_token || sessionStorage.user_token;
      // 切换商品课程的勾选状态
      this.$axios.patch(`${this.$settings.HOST}/cart/`, {
        selected: this.course.selected,
        course_id: this.course.id
      }, {
        headers: {
          "Authorization": "jwt " + token,
        }
      }).then(response => {
        this.$message.success(response.data.message);
        // 当子组件中，切换了商品课程的勾选状态，则通知父组件重新计算购物商品总价
        this.$emit("change_select");

      }).catch(error => {
        this.$message.error(error.response);
      });
    },
    delete_course() {
      let token = localStorage.user_token || sessionStorage.user_token;
      this.$axios.delete(`${this.$settings.HOST}/cart/`, {
        params: {
          course_id: this.course.id
        },
        headers: {
          "Authorization": "jwt " + token,
        }
      }).then(response => {
        this.$message.success(response.data.message);
        // 当子组件中，切换了商品课程的勾选状态，则通知父组件重新计算购物商品总价
        this.$emit("delete_course");

      }).catch(error => {
        this.$message.error(error.response);
      });
    }
  }
}
</script>

<style scoped>
.cart_item::after {
  content: "";
  display: block;
  clear: both;
}

.cart_column {
  float: left;
  height: 250px;
}

.cart_item .column_1 {
  width: 88px;
  position: relative;
}

.my_el_checkbox {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 16px;
  height: 16px;
}

.cart_item .column_2 {
  padding: 67px 10px;
  width: 520px;
  height: 116px;
}

.cart_item .column_2 img {
  width: 175px;
  height: 115px;
  margin-right: 35px;
  vertical-align: middle;
}

.cart_item .column_3 {
  width: 197px;
  position: relative;
  padding-left: 10px;
}

.my_el_select {
  width: 117px;
  height: 28px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.cart_item .column_4 {
  padding: 67px 10px;
  height: 116px;
  width: 142px;
  line-height: 116px;
}

</style>
